<#assign ctx=springMacroRequestContext.contextPath />
<#include "/macro/publicMacro.ftl">
<#import "/macro/pagination.ftl" as Pagination>

<@header title="类目列表">
    <link href="${ctx}/resource/frame/layui/css/layui.css" rel="stylesheet">
</@header>

<@body>
    <h2 class="module-title">类目管理</h2>

    <div class="alert alert-primary" role="alert">
        <form class="form-inline form-margin" action="${ctx}/cmsCategory/list">
            <div class="form-group mx-sm-3 mb-2">
                <label for="tenantId" >租户：</label>
                <select class="form-control" name="tenantId" id="tenantId">
                    <#list tenants as tenant>
                        <option value="${tenant.id}" <#if tenant.id == cmsCategory.tenantId>selected</#if>>${tenant.description}</option>
                    </#list>
                </select>
            </div>

            <div class="form-group mx-sm-3 mb-2">
                <button type="submit" class="btn btn-primary">查询</button>
            </div>

            <@shiro.hasPermission name="cmsCategory:toAdd">
            <div class="form-group mx-sm-3 mb-2" style="float:right">
                <span style="float:left"><a href="${ctx}/cmsCategory/toAdd">添加数据</a></span>
            </div>
            </@shiro.hasPermission>
        </form>
    </div>

    <div class="table-responsive">
        <table id="treeTable" class="table table-striped table-bordered" lay-filter="treeTable"></table>
    </div>

</@body>

<@footer>
    <script src="${ctx}/resource/frame/layui/layui.js"></script>

    <script type="text/html" id="oper-col">
        <@shiro.hasPermission name="cmsCategory:view"><a class="btn btn-primary btn-sm" lay-event="view" href="javascript: return false;" role="button" aria-pressed="true">详情</a></@shiro.hasPermission>
        <@shiro.hasPermission name="cmsCategory:edit"><a class="btn btn-info btn-sm" lay-event="edit" href="javascript: return false;" role="button" aria-pressed="true">编辑</a></@shiro.hasPermission>
    </script>

    <script type="text/javascript">

        var data = JSON.parse('${treeJson}');

        layui.config({
            base: '${ctx}/resource/frame/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;

            // 渲染表格
            var renderTable = function () {
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'parentId',
                    treeDefaultClose: false,
                    treeLinkage: false,
                    elem: '#treeTable',
                    <#--url: '${ctx}/module/list/json',-->
                    data: data,
                    page: false,
                    cols: [[
                        {type: 'numbers'},
                        {field: 'name', title: '类目名称'},
                        {field: 'id', title: '类目ID'},
                        {field: 'description', title: '类目描述'},
//                        {field: 'parentId', title: 'parentId'},
                        {templet: '#oper-col', title: '操作'}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            };

            renderTable();

            //监听工具条
            table.on('tool(treeTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                handleTableOperate(layEvent, data);
            });
        });

        function handleTableOperate(layEvent, data) {
            if (layEvent === 'view') {
                window.location = "${ctx}/cmsCategory/view/" + data.id;
            } else if (layEvent === 'edit') {
                window.location = "${ctx}/cmsCategory/toEdit/" + data.id;
            }
        }

        $(function () {
            $(window.body).css({"font-size": ".875rem", "line-height": "1.5"});
        });
    </script>

</@footer>